<template>
  <div class="app-container">

    <panel types="primary">
      <template slot="title">查询条件</template>
      <template slot="body">

        <el-form :inline="true">

          <el-form-item label="登录名">
            <el-input v-model="formSearch.loginName" placeholder="支持模糊查询"></el-input>
          </el-form-item>

          <el-form-item label="手机号">
            <el-input v-model="formSearch.mobile" placeholder="等值匹配"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="formSearch.status">
              <el-option label="正常" v-bind:value="0"></el-option>
              <el-option label="停用" v-bind:value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" v-on:click="search">查询</el-button>
          </el-form-item>
        </el-form>

      </template>
    </panel>


    <el-table v-bind:data="tableData" border>
      <el-table-column prop="loginName" label="用户名"></el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column  label="性别">
        <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.sex===0"   effect="plain">男</el-tag>
            <el-tag type="primary"  v-else-if="scope.row.sex===1"  effect="plain">女</el-tag>
            <el-tag type="danger"  v-else  effect="plain">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="avatar" label="头像"></el-table-column>
      <el-table-column  label="状态">
        <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.status===0"   effect="dark">正常</el-tag>
            <el-tag type="danger"  v-else  effect="dark">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="loginIp" label="登录IP"></el-table-column>
      <el-table-column prop="loginDate" label="最后登录时间"></el-table-column>
    </el-table>

    <el-pagination
    v-on:size-change="handleSizeChange"
    v-on:current-change="handleCurrentChange"
    v-bind:page-sizes="[10, 20, 30, 40,50]"
    v-bind:current-page="formSearch.pageNumber"
    v-bind:page-size="formSearch.pageSize"
    v-bind:total="total"
    layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>




  </div>
</template>

<script>
  // 导入Panel组件 import 组件对象名 from '地址'
  import panel from '@/components/Panel/index.vue'
  // 导入自定义Service对象
  import adminService from '@/service/AdminService.js'

  export default {
    name: 'Admin',
    components: {
      // 标签名:组件实例对象
      panel
    },
    data() {
      return {
        total: 0,
        tableData: [],
        formSearch: {
          loginName: undefined,
          mobile: undefined,
          status: 0,
          pageNumber: 1,
          pageSize: 10
        }
      }
    },
    methods: {

    },
    created() {
      // 非常重要的
      adminService.init(this)

    }
  }
</script>

<style>
</style>
